<template>
    <div class="location">
        <div>
            <van-nav-bar title="资产位置" @click-left="onClickLeft" left-arrow />
        </div>
        <div>
            <van-search class="search-input" shape="round" v-model="searchVal" placeholder="请输入关键字" />
        </div>
        <div style="width: 100vw;" class="mapbox">
            <positionMap ref="myMapRef" @getaddress="getaddress"  width="100vw" height="70vh"></positionMap>
        </div>
        <div>
            <div style="display: flex; justify-content: center;" class="btn">
                <div class="btnlist">
                    <div style="width: 50%;padding: 10px; " :class="[type == 1 ? 'activeBtn' : '']" @click="closeBtn">
                        取消</div>
                    <div style="width: 50%; padding: 10px;" :class="[type == 2 ? 'activeBtn2' : '']" @click="submitBtn">
                        确认</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import positionMap from '@/components/positionMap'
import {splitStreetAndDetail} from '@/utils/utils'
import backMixin from '../../mixins/backMixin'
export default {
    mixins: [backMixin],
    components:{
        positionMap
    },
    data() {
        return {
            searchVal:'',
            type:1,
            addressInfo: null,
        }
    },
    computed:{
  
    },
    methods:{
        getaddress(v){
            // v 建议结构：{ address: '', lng: '', lat: '' }
            
            if (!v) return;
            // 拆分街道和详细地址，并合并到 v 中
            const { street, detailAddress } = splitStreetAndDetail(v.address || '');
            const d = {
                ...v,
                streetId: street || '',
                address: detailAddress || '',
                coordinateAddress: v.address || '',
                lng: v.lng || '',
                lat: v.lat || ''
            };
            // 过滤无效字段（如没有 street/detailAddress/address 时不传空串，可按实际需要调整）
            // 此处没有重复赋值，也避免 location 字段错写
            console.log(d, 'address');

            this.addressInfo = d;

        },
        submitBtn() {
            this.type = 2
            if (!this.addressInfo || !this.addressInfo.lng || !this.addressInfo.lat) {
                this.$toast && this.$toast('请先选择位置')
                return
            }
            // 使用 Vuex 存储地址返回数据，然后后退
            try {
                this.$store.commit('assectData/setReturnData', this.addressInfo)
            } catch (e) {
                console.warn('Vuex commit setReturnData failed', e)
            }
            this.$router.back()
        },
        closeBtn() {
            this.type = 1
            this.$router.back()
        },
        onClickLeft() {
            this.$router.back()
        },
    }
}
</script>
<style scoped>

.location {
    width: 100%;
    height: 100vh;
    position: relative;
}
.activeBtn {
    border-radius: 12.5px 0 17.5px 12.5px;
    background-color: #fff;
    color: #000;
}

.activeBtn2 {
    border-radius: 0px 12.5px 12.5px 12.5px;
    background-color: #fff;
    color: #000;
}

.btn {
    position: absolute;
    bottom: 80px;
    width: 70vw;
    left: 15vw;
}

.btnlist {
    display: flex;
    border: 1px solid #3772ff;
    background-color: #3772ff;
    border-radius: 12.5px;
    text-align: center;
    width: 305px;
    color: #fff;
}
</style>